// import { Button, Input, Modal, message, } from "antd"
// import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
// import React, { useState, useEffect } from "react";
// import { findUserFriend } from '@/api/chat/index'
// import { Friend } from '@/modules/chat/index'
// import style from './FiandUser.module.scss';

// import InfiniteScroll from 'react-infinite-scroll-component';
// export default function Counter() {
//   const [serch, setserch] = useState<string>('')

//   const [items, setitems] = useState<Array<Friend>>([])
//   const [page, setpage] = useState<number>(1)
//   const [pageSize, setpageSize] = useState<number>(10)
//   const [index, setIndex] = useState(2);


//   const fetchData = async () => {
//     setpage(page + 1)
//     const res = await findUserFriend(page, pageSize, serch)
//     console.log(res);
//     setitems([...items, ...res.data.records])
//     setIndex((prevIndex) => prevIndex + 1);
//   }
//   async function onSearch(enet: string) {
//     const res = await findUserFriend(page, pageSize, enet)
//     if (res.data.records.length === 0) {
//       message.info('与其相濡以沫，不如相忘于江湖~')
//       setitems([])
//     } else {
//       message.success('追寻到' + res.data.records.length + "名侠客")
//       setitems(res.data.records)
//     }
//   }
//   return (
//     <div>

//       <InfiniteScroll
//         refreshFunction={fetchData}
//         dataLength={items.length} //This is important field to render the next data
//         next={fetchData}
//         hasMore={true}
//         loader={<h4>Loading...</h4>}
//         endMessage={
//           <p style={{ textAlign: 'center' }}>
//             <b>Yay! You have seen it all</b>
//           </p>
//         }
//         // below props only if you need pull down functionality
//         // refreshFunction={this.refresh}
//         pullDownToRefresh
//         pullDownToRefreshThreshold={50}
//         pullDownToRefreshContent={
//           <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
//         }
//         releaseToRefreshContent={
//           <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
//         }
//       >
//         {/* <div
//             style={{
//               marginTop: 20,
//               width: 400,
//               height: 250,
//               borderRadius: '20px',
//               overflow: "auto",
//               // background: '#ccc',
//               position: 'absolute',// 绝对定位，方便设置滚动条位置
//               right: 0, // 设置滚动条在最右边
//             }}> */}

//         {items.map((item) =>
//           <div className="userbox" style={{
//             marginTop: 5,
//             display: "flex", justifyContent: " space-between", alignItems: "center"
//           }} key={item.id}>

//             <img style={{ width: 50, height: 50, borderRadius: 35 }} src={item.headImg} alt="" />
//             <div style={{
//               marginLeft: 10,
//               display: "flex", flexDirection: "column",
//               alignItems: "flex-start"
//             }}>
//               <div style={{}}>花名 :{item.nickname}</div>
//               <div>
//                 人称 : {item.username}
//               </div>
//             </div>
//             <Button style={{}}> 结识</Button>
//           </div>
//         )}
//         {/* </div> */}
//       </InfiniteScroll>
//     </div >
//   )
// }

import React, { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { Avatar, Divider, List, Skeleton } from 'antd';

import axios from 'axios';

interface DataType {
  gender: string;
  name: {
    title: string;
    first: string;
    last: string;
  };
  email: string;
  picture: {
    large: string;
    medium: string;
    thumbnail: string;
  };
  nat: string;
}

const App: React.FC = () => {
  // const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DataType[]>([]);

  const loadMoreData = async () => {
    // if (loading) {
    //   return;
    // }
    // console.log("触发了");

    // setLoading(true);
    const res = await axios.get('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
    console.log(res);

    setData([...data, ...res.data.results])

  };

  // useEffect(() => {
  //   loadMoreData();
  // }, []);

  return (
    <div
      id="scrollableDiv"
      style={{
        height: 400,
        overflow: 'auto',
        padding: '0 16px',
        border: '1px solid rgba(140, 140, 140, 0.35)',
      }}
    >
      <InfiniteScroll
        dataLength={data.length}
        next={loadMoreData}
        hasMore={data.length < 20}
        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
        endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
        scrollableTarget="scrollableDiv"
      >
        <List
          dataSource={data}
          renderItem={(item) => (
            <List.Item key={item.email}>
              <List.Item.Meta
                avatar={<Avatar src={item.picture.large} />}
                title={<a href="https://ant.design">{item.name.last}</a>}
                description={item.email}
              />
              <div>Content</div>
            </List.Item>
          )}
        />
      </InfiniteScroll>
    </div>
  );
};

export default App;